<template>
  <div class="page-wrapper">
    <div class="header-wrapper">
      <h2 class="top">
        <van-icon class="back-icon" @click="fanhui" name="arrow-left" size="30px" />
        <span class="title-text">服务详情</span>
      </h2>
    </div>
    <div v-if="servicesj && Object.keys(servicesj).length > 0">
      <div class="yuan">
        <van-icon name="clock" size="80px" color="#FDDB78"/>
      </div>
      <h2 style="text-align: center">服务{{ receivedStatus }}</h2>
      <div class="tuan-dui">
        <div class="tu-pian">
          <img :src="servicesj.imageUrl" alt="文章图片" />
        </div>
        <!--    团队-->
        <div class="tuan-dui-text">
          <span class="tuan-dui-text-title">{{servicesj.doctorName}}</span>&emsp;<span class="jigo">{{servicesj.position}}</span><br><br>
          <span class="jigo">所属机构：{{servicesj.teamName}}</span><br><br>
          <span class="jigo">签约人数：{{servicesj.signUpCount}}</span><br><br>
          <span class="jigo">服务次数：</span>
          <span class="ping-fen">{{servicesj.signUpCount}}</span>
        </div>
      </div>
      <div class="tuan-dui1">
        <ul class="service-order-list">
          <li>
            <span class="label">服务单号</span>
            <span class="value">{{ servicesj.serviceNumber }}</span>
          </li>
          <li>
            <span class="label">申请人</span>
            <span class="value">{{ servicesj.realName }}</span>
          </li>
          <li>
            <span class="label">服务包</span>
            <span class="value">{{ servicesj.servicePackageName }}</span>
          </li>
          <li>
            <span class="label">服务项目</span>
            <span class="value">{{ servicesj.serviceItem }}</span>
          </li>
          <li>
            <span class="label">服务地点</span>
            <span class="value">{{ servicesj.serviceLocation }}</span>
          </li>
          <li>
            <span class="label">服务时间</span>
            <!-- 调用 formatServiceTime 方法处理时间 -->
            <span class="value">{{ formatServiceTime(servicesj.serviceTime) }}</span>
          </li>
          <li>
            <span class="label">备注</span>
            <span class="value">{{ servicesj.note }}</span>
          </li>
          <li>
            <span class="label">提交时间</span>
            <span class="value">{{formatServiceTime (servicesj.applyTime )}}</span>
          </li>
        </ul>
      </div>
      <van-address-list
          add-button-text="取消预约"
          @add="open"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedStatus: '',
      receivedId: '',
      servicePackage: null,
      isLoading: false,
      servicesj: {} ,// 初始化 servicesj 对象,
      id:'',
    };
  },
  methods: {
    // 取消预约方法
      open() {
        this.$confirm('是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(`http://localhost:10086/api/service/service_application/del/${this.receivedId}`).then(res=>{
            if (res.data.code !== 200){
              this.$message.error('取消失败');
            }else {
              this.$message.success('取消成功');
              setTimeout(() => {
                this.$router.go(-1)
              });
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    findAll(recordId) {
      this.isLoading = true; // 开始加载数据
      this.axios.get(`http://localhost:10086/api/service/service_application/findServiceApplicationById/${recordId}`)
          .then(res => {
            console.log('请求响应:', res);
            if (res.data.code === 200) {
              this.servicesj = res.data.data;
              console.log('数据:', this.servicesj); // 打印医生数据，检查是否有 id 属性
            } else {
              this.$message.error("获取失败");
            }
          })
          .catch(error => {
            console.error('请求出错:', error);
            this.$message.error('网络请求出错，请检查网络或服务器状态');
          })
          .finally(() => {
            this.isLoading = false; // 数据加载完成
          });
    },
    fanhui() {
      this.$router.go(-1)
    },
    // 添加时间格式化方法
    formatServiceTime(time) {
      return time ? time.replace('T', ' ') : '';
    }
  },
  created() {
    // 从路由参数中获取 status 和 id 值
    const status = this.$route.query.status;
    const id = this.$route.query.id;
      this.receivedStatus = status;
      if (this.receivedStatus){
        this.receivedStatus = localStorage.getItem('status');
      }
      this.receivedId = id;
      if (this.receivedId){
        this.receivedId = localStorage.getItem('serviceRecordId');
      }
      // 调用 findAll 方法并传递 id 参数
      this.findAll(this.receivedId);

    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({ name: 'login' });
      }, 1000);
    }
    // 设置全局默认请求头
    this.axios.defaults.headers.common['token'] = token;
  }
};
</script>

<style scoped>
.service-order-list {
  list-style: none;
  padding: 0;
}

.service-order-list li {
  margin-bottom: 20px;
  margin-left: 20px;

}

.label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
}
.yuan{
  width: 100%;
  height: 80px;
  margin-top: 30px;
  text-align: center;
}
.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}


.article-text p {
  font-size: 12px;
  color: gray;
}


.tu-pian img {
  width: 150px;
  height: 150px;
  float: left;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 128, 255, 0.2);
}


.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}

img {
  //background-color: red;
  width: 100%;
  height: 100%;
}


.tu-pian1 img{
  width: 80px;
  height: 80px;
  border-radius: 20px;
}

.ping-fen{
  margin-left: 10px;
  color: #2984F8;
  font-size: 18px;
}
.jigo{
  color: dimgrey;
}
.tuan-dui-text{
  width: 200px;
  height: 100px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
.tuan-dui-text-title{
  font-size: 20px;
  color: black;
}
.tu-pian{
  width: 150px;
  height: 150px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
.tu-pian img{
  width: 150px;
  height: 150px;
  float: left;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 128, 255, 0.2);
}
.tuan-dui{
  width: 100%;
  height: 180px;
  background-color: white;
}
.tuan-dui1{
  width: 100%;
  height: auto;
  background-color: white;
  padding: 10px 0px;
}
.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}

img {
  //background-color: red;
  width: 100%;
  height: 100%;
}
</style>